<template>
    <view class="item flex top-15">
        <view class="imageBox" @click="previewImages">
            <image class="image" :src="item.image_list[0].url" mode="aspectFill" />
        </view>
        <view class="titles flex">
            <view class="font16 fontBold" v-if="item.build_size_range">{{item.build_size_range}}m²{{item.sell_type_display?'（'+item.sell_type_display+'）':''}}</view>
            <view class="priceBox flex">
                <text>{{item.size_type_display}}</text>
                <block v-if="item.amount_range.length > 0">
                    <text class="proce col-grey fontNum">{{amountToBit(item.amount_range)}}</text>万
                </block>
            </view>
            <block v-if="item.vr_shelve && item.vr_url">
                <view class="vrBtn bg-theme text-center col-fff fontBold font16 top-10" @click="toVR(item)">VR</view>
            </block>
        </view>
    </view>
</template>
<script>
    import { mapState } from 'pinia';
    import { useConfigStore } from '@/store/index';
    import { getBit } from '@/common/common';
	export default {
		data() {
			return {
            }
		},
        props:{
            item: {
                value: Object,
                default: {}
            }
        },
        computed:{
            ...mapState(useConfigStore, ['puid'])
        },
        methods: {
			// 预览图片
			previewImages(){
				uni.previewImage({
					current: 0,
					urls: this.item.image_list.map(item => item.url),
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏']
					}
				})
			},
            
            //vr
            toVR(info){
                let url = encodeURIComponent(info.vr_url);
                let image = encodeURIComponent(info.image_list[0].url);
                uni.navigateTo({
                	url: `/pages/product/article/detail/index?url=${url}&productId=${this.product_id}&puid=${this.puid}&title=${info.product_title}(VR)&image=${image}`
                })
            },

            //总价过滤
            amountToBit(val){
                return getBit(val);
            }
		}
	}
</script>

<style lang="scss" scoped>
    .item{
        padding-bottom: 30rpx;
        justify-content: space-between;
        border-bottom: 2rpx solid rgba(0,0,0,.05);
        .imageBox{
            width: 300rpx;
            height: 300rpx;
            .image{
                width: 100%;
                height: 100%;
            }
        }
        .titles{
            flex-direction: column;
            align-items: flex-start;
            width: calc(100% - 320rpx);
            .priceBox{
                margin-top: 20rpx;
                justify-content: flex-start;
                align-items: flex-end;
                .proce{
                    color: $theme-color;
                }
            }
            .vrBtn{
                width: 120rpx;
                height: 56rpx;
                line-height: 56rpx;
                border-radius: 20rpx;
                box-shadow: 0rpx 0rpx 8rpx $theme-color;
            }
        }
    }
</style>
